<template>
    <nut-popup safe-area-inset-bottom position="bottom" closeable round :custom-style="{ height: 'auto' }"
        v-model:visible="props.show" @close="emit('close', false)" @click-close-icon="emit('close', false)">
        <view class="main">
            <view class="pro dispaly-center">
                <view class="cover">
                    <image src="/static/test.png" mode="aspectFill" />
                </view>
                <view class="pro-more dispaly-column-between">
                    <view class="name">{{ props.name }}</view>
                    <view class="spec" v-if="props.data">已选：{{ specName ? specName : props.data.split(',')[0] }}</view>
                    <view class="price">
                        <nut-price :price="props.m" :decimal-digits="2" :thousands="true" size="large" />
                    </view>
                </view>
            </view>
            <view class="spec">
                <view class="title">规格</view>
                <view class="spec-box dispaly-center flex-warp" v-if="props.data">
                    <view class="spec-item" :class="{ 'active': index == current }" @click="selSpec(item, index)"
                        v-for="(item, index) in props.data.split(',')" :key="item">{{ item }}</view>
                </view>
            </view>
            <view class="num dispaly-just-between spec">
                <view class="title">数量</view>
                <view class="number">
                    <nut-input-number v-model="value" button-size="30" input-width="50" />
                </view>
            </view>
            <view class="btns dispaly-center">
                <!-- <view class="btn-item add dispaly-align-center" @click="addCart">加入购物车</view> -->
                <view class="btn-item buy dispaly-align-center" @click="buy">立即购买</view>
            </view>
        </view>
    </nut-popup>
</template>
<script setup>
import { ref } from 'vue';

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    data: String,
    name: String,
    m: String | Number
})
const emit = defineEmits(['close', 'buy'])

const value = ref(1)

// 选择规格
const current = ref(0)
let specName = ref('')
const selSpec = (item, index) => {
    current.value = index
    specName.value = item
}

// 购买
const buy = () => {
    if (!specName.value) specName.value = props.data.split(',')[0]
    emit('buy', { spec: specName.value, number: value.value })

}
</script>

<style lang="scss" scoped>
.active {
    border: 1rpx solid #FB4E47 !important;
    color: #FB4E47 !important;
}

.main {
    padding: 80rpx 34rpx;

    .pro {

        .cover {
            margin-right: 17rpx;

            image {
                width: 190rpx;
                height: 190rpx;
                border-radius: 16rpx;
            }
        }

        .pro-more {
            height: 190rpx;

            .name {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: bold;
                font-size: 24rpx;
                color: #111111;
            }

            .spec {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #999999;
            }

        }
    }

    .spec {
        margin-top: 40rpx;

        .title {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #111111;
        }

        .spec-box {
            box-sizing: border-box;

            .spec-item {
                box-sizing: border-box;
                margin: 10rpx;
                background: #F5F9FC;
                border-radius: 16rpx;
                padding: 27rpx 78rpx;

                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                font-size: 26rpx;
                color: #111111;
            }
        }
    }

    .btns {
        margin-top: 120rpx;

        .add {
            background: radial-gradient(#FFDD57 0%, #FFA057 100%);
            border-radius: 35rpx 0rpx 0rpx 35rpx;
        }

        .buy {
            background: #FB4E47;
            // border-radius: 0rpx 35rpx 35rpx 0rpx;
            border-radius: 35rpx;
        }

        .btn-item {
            width: 100%;
            height: 80rpx;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 500;
            font-size: 30rpx;
            color: #FFFFFF;
        }
    }
}
</style>